/* eslint-disable*/
import React, { LegacyRef, useEffect, useRef, useState } from 'react';
import { observer, useObserver } from 'mobx-react-lite';
import { useStore } from '@/store';
import SplitPane from 'react-split-pane'
import AiForm from '@/components/AiForm'
import AiMceEditor from '@/components/AiMceEditor'
import AiMceList from '@/components/AiMceList'
import { Editor } from '@tinymce/tinymce-react';
import './index.scss'
import { EPageType } from '@/store/fileMagage';

function EditorPage(props: any) {
  const store = useStore();
  const [formStatus, setFormStatus] = useState(false);
  const [loading,setLoding]=useState<boolean>(false);
  const buttonRef = useRef<Editor | null>(null);

  /**返回列表 */
  const backToList = async () => {
    setLoding(true)
    if (buttonRef.current && buttonRef.current.editor && buttonRef.current.editor.getContent({ format: 'text' }) == '') {
      store.fileMagage.pageType = EPageType.list;
      setLoding(false)
      return
    } 
    if (buttonRef.current && buttonRef.current.editor) {
      const record=buttonRef.current.editor.getContent({ format: 'raw' })
      store.fileMagage.pageType = EPageType.list;
      if (store.fileMagage.currentFile.currentFileid == '') {
        await store.fileMagage.addFile(store.fileMagage.currentFile.currentTitle)
      } else {
        /**更新文件名 */
        await store.fileMagage.updateFile(store.fileMagage.currentFile.currentTitle)
      }
      /**上传边编写记录 */
      await store.fileMagage.postRecord({ record: record })
      /**获取列表 */
      //await store.fileMagage.getFiles('1')
      /**返回后初始化 */ 
      store.fileMagage.reset();
    } 
    setLoding(false)

  }
  useEffect(() => {
    store.cateTypeStore.initCateInfo();
  }, [])
  const handleEditorChange = (content: any, editor: any) => { 
    store.fileMagage.setTitle(editor.getContent({ format: 'text' }).split('\n')[0]);
  }

  return (
    <div className='aicontain'>
      <SplitPane split="vertical" onDragStarted={() => {
        if (buttonRef.current && buttonRef.current.editor && buttonRef.current.editor.iframeElement)
          buttonRef.current.editor.iframeElement.style.zIndex = '-1'
      }} onDragFinished={() => {
        if (buttonRef.current && buttonRef.current.editor && buttonRef.current.editor.iframeElement)
          buttonRef.current.editor.iframeElement.style.zIndex = '100'
      }}
        minSize={store.cateConfig.isShowCateInfo ? '45%' : '100%'}
      // defaultSize={parseInt(window.localStorage.getItem('splitPos')!, 10)}
      // onChange={(size:number) => window.localStorage.setItem('splitPos', size.toString())}
      >{store.cateConfig.isShowCateInfo ?
        <div className='form-aiEditor'>
          <AiForm cb={(status) => { setFormStatus(status); if (!status) { store.cateConfig.setShowCateInfo(false) } }}></AiForm>
        </div> : null}

        <div className={'aiEditor '+(loading ?' pointer-events-none':' pointer-events-auto')}>
          {store.fileMagage.pageType === EPageType.editor ? <><div className=' h-r4.0 leading-r4.0 font-bold text-r1.6 pl-r1.0 bg-gray-F4F6FB'>
            <span onClick={backToList} className=' cursor-pointer'>
              <span className='iconfont icon-xiangzuo font-bold text-r1.6 '></span>
              <span>{store.fileMagage.currentFile.currentTitle || '未命名文件夹'}</span>
            </span>
          </div>
            <AiMceEditor cb={handleEditorChange} ref={buttonRef}></AiMceEditor></> : <>
            <AiMceList></AiMceList>
          </>}

        </div>
      </SplitPane >

    </div >
  );

}
export default observer(EditorPage)

/* eslint-enable */